import React, { useEffect, useState } from 'react';
import { ModalForm, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
import { checkRoleList } from '../../Role/role';

const roleList = async () => {
  return await checkRoleList();
};
export type UpdateFormData = {
  updateModalVisible: boolean;
  handleUpdateModalVisible: any;
  formRef: any;
  formValue: Partial<ADMIN.AdminUser> | undefined;
  handleUpdate: (id: number | undefined, values: ADMIN.AdminUser) => void;
};

const UpdateForm: React.FC<UpdateFormData> = (props) => {
  const { formValue, formRef, handleUpdate, updateModalVisible, handleUpdateModalVisible } = props;

  useEffect(() => {
    formRef.current?.resetFields();
  }, [formRef, formValue]);

  return (
    <>
      {/* 新建表单 */}
      <ModalForm<ADMIN.AdminUser>
        title="修改用户"
        width="500px"
        initialValues={formValue}
        visible={updateModalVisible}
        onVisibleChange={handleUpdateModalVisible}
        formRef={formRef}
        onFinish={async (value) => {
          handleUpdate(props.formValue?.id, value);
        }}
      >
        <>
          <ProFormText label="用户名" name="username" />
          <ProFormText label="名称" name="name" />
          <ProFormText label="密码" name="password" />
          <ProFormCheckbox.Group
            name="roles"
            label="角色"
            request={async () => await checkRoleList()}
            placeholder="请选择角色"
          />
        </>
      </ModalForm>
    </>
  );
};

export default UpdateForm;
